<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <div>
        <van-nav-bar title="消息" left-text="返回" right-text="全部已读" left-arrow @click-left="onClickLeft"
            @click-right="onClickRight" />

        <div class="notice_div">
                 <div class="notice" v-if="isNoticeVisible">
                <span class="x" @click="x()"><van-icon name="cross" /></span>
                <span>打开系统通知,H币入账等信息不错过</span>
                <span><el-button type="primary" round @click="open()">开启</el-button></span>
                 </div>
        </div>
        <div class="msg_div">
            <dl @click="ToXt()">
                <dt><span class="icon_div xt_div"><i class="iconfont icon-xiaoxi"
                            style="color: #fff;font-size: 35px;"></i></span></dt>
                <dd>
                    <span class="xt_msg xt">系统消息</span>
                    <van-badge :content="system" class="wei xt" :show-zero="false"></van-badge>
                </dd>
            </dl>
            <dl @click="ToWz()">
                <dt><span class="icon_div wz_div"><i class="iconfont icon-zaixianwenzhen_xianxingzaixianzixun"
                            style="color: #fff;font-size: 35px;"></i></span></dt>
                <dd>
                    <span class="xt_msg wzs">问诊消息</span>
                    <van-badge :content="consultation" class="wei xt" :show-zero="false"></van-badge>
                </dd>

            </dl>
            <dl @click="ToH()">
                <dt><span class="icon_div h_div"><i class="iconfont icon-H"
                            style="color: #fff;font-size: 35px;"></i></span></dt>
                <dd>
                    <span class="xt_msg h">H币入账消息</span>
                  <van-badge :content="hCoin" class="wei xt" :show-zero="false"></van-badge><!--<div class="child" /> -->
                </dd>
            </dl>
        </div>
    </div>
</template>
<script lang='ts' setup>
import router from '@/router';
import { showToast } from 'vant';
import { ref } from 'vue';
const system=ref(1)
const consultation=ref(4)
const hCoin=ref(10)
const onClickLeft = () =>{
    history.back();
};

const onClickRight = () =>{
    // showToast('按钮');
//   全部已读
system.value=0
consultation.value=0
hCoin.value=0
}

const isNoticeVisible = ref(true)
//点击x关闭通知栏
const x = () => {
    isNoticeVisible.value = false
}
//点击开启通知
const open = () => {
    showToast('开启通知')
}

//跳转页面
const ToXt = () => {
 router.push('/message/system')
}
const ToWz = () => {
    router.push('/message/inquiry')
}
const ToH = () => {
    router.push('/message/coin')
}
</script>
<style scoped lang="scss">
.notice_div{
    margin-top: 10px;
    width: 100%;
    height: 40px;
    .notice {
    width: 100%;
    height: 35px;
    line-height: 30px;
    //阴影
    box-shadow: 1px 1px 10px 0px #ccc;
    border-radius: 5px 5px 5px 5px;
    margin: 10px auto;
    display: flex;
    justify-content: space-around;
    font-size: 15px;

    .x {
        width: 20px;
        height: 100%;

        line-height: 30px;
        text-align: center;
    }

}
}
.msg_div {
    margin-top: -20px;
    dl {
        height: 70px;

        dt {
            height: 20px;
        }

        .wei {
            float: right;
            margin-right: 20px;
            margin-top: 35px;
        }
    }

    .icon_div {
        width: 60px;
        display: block;
        float: left;
        height: 60px;
        line-height: 60px;
        text-align: center;
       
        border-radius: 5px 5px 5px 5px;
        margin-left: 2%;
        margin-top: 25px;

    }
    .xt_div{
 background-color: #4fcb9f;
    }
    .wz_div{
        background-color: #f984a2;
    }
    .h_div{
        background-color: #ffab26;
    }
    .xt_msg {
        height: 70px;
        line-height: 70px;
        margin-top: 0px;
        margin-left: 15px;
        color: #4fcb9f;
    }
    .wzs{
        color: #f984a2;
    }
    .h{
        color: #ffab26;
    }
}
</style>